<template>
  <view class="container">
    <view class="box_1">
      <view :style="{ height: tops + 'px' }"></view>
      <view class="box_header u-flex">
        <view
          class="flex-center mar-r-16"
          style="width: 120rpx; height: 120rpx; border-radius: 50%; background: #ffffff"
        >
          <up-avatar
            :src="
              useMemberStore().token
                ? userInfo?.avatar
                : 'https://ossresource.miyingbl.com/uploads/20231230/h-bl-app/1703899956674'
            "
            size="112rpx"
            @click="previewAvatar"
          ></up-avatar>
        </view>
        <view class="box_name flex-1">
          <view class="name f-s-32 co-white u-flex" @click="previewAvatar"
            >{{ useMemberStore().token ? userInfo?.name : '点击登录' }}
            <view
              class="user_tag"
              v-if="
                userInfo?.is_audit &&
                useMemberStore().token &&
                userInfo?.level &&
                userInfo?.level.length == 4
              "
              >{{ userInfo?.level }}
            </view>
            <view
              class="user_tag_2"
              v-if="
                userInfo?.is_audit &&
                useMemberStore().token &&
                userInfo?.level &&
                userInfo?.level.length == 2
              "
              >{{ userInfo?.level }}
            </view>
            <view
              class="user_tag_3"
              v-if="
                userInfo?.is_audit &&
                useMemberStore().token &&
                userInfo?.level &&
                userInfo?.level.length == 3
              "
              >{{ userInfo?.level }}
            </view>
            <view
              class="user_tag_5"
              v-if="
                userInfo?.is_audit &&
                useMemberStore().token &&
                userInfo?.level &&
                userInfo?.level.length == 5
              "
              >{{ userInfo?.level }}
            </view>
          </view>
          <view
            class="level f-s-26 co-white mar-t-10"
            v-if="userInfo?.is_audit && useMemberStore().token"
          >
            <text v-if="userInfo?.hospital_name"> {{ userInfo?.hospital_name }}</text>
            <!-- <text v-if="userInfo?.rf_name">/{{ userInfo?.rf_name }}</text> -->
          </view>
          <view
            class="level f-s-26 u-flex mar-t-10"
            style="color: #d4f4f3"
            v-if="!userInfo?.is_audit && useMemberStore().token"
          >
            <up-icon name="info-circle-fill" color="#D4F4F3" size="18" class="mar-r-6"></up-icon>
            未认证
          </view>
        </view>
        <view
          class="box_r h-flex flex-center"
          v-if="userInfo?.is_audit && useMemberStore().token"
          @click="navigateTo(`/pages-users/my-page/index`)"
          >个人主页</view
        >
      </view>
      <view class="box_bottom w-100 u-flex u-row-around co-white">
        <view class="flex-column-center">
          <view class="box_bottom_item_icon f-s-32 f-w-500">
            {{ is_show ? Number(BoundInfo?.money_balance).toFixed(2) : '******' }}
          </view>
          <view class="box_bottom_item_text f-s-28 flex-center">
            余额
            <image
              v-if="is_show"
              src="https://ossresource.miyingbl.com/def/1bccd202405231405381164.png"
              @click="toggleEye"
            ></image>
            <image
              v-else
              src="https://ossresource.miyingbl.com/def/4a9ef202405231405385125.png"
              @click="toggleEye"
            ></image>
          </view>
        </view>
        <view class="flex-column-center">
          <view class="box_bottom_item_icon f-s-32 f-w-500">
            {{ is_show_s ? Number(BoundInfo?.current_month_income).toFixed(2) : '****' }}
          </view>
          <view class="box_bottom_item_text f-s-28 flex-center">
            本月收入
            <image
              v-if="is_show_s"
              src="https://ossresource.miyingbl.com/def/1bccd202405231405381164.png"
              @click="toggleEyeS"
            ></image>
            <image
              v-else
              src="https://ossresource.miyingbl.com/def/4a9ef202405231405385125.png"
              @click="toggleEyeS"
            ></image>
          </view>
        </view>
        <view class="flex-column-center">
          <view
            class="box_bottom_item_icon f-s-32 f-w-500"
            @click="navigateTo('/pages-users/my-money/index')"
          >
            <image
              src="https://ossresource.miyingbl.com/def/13796202405231405389808.png"
              style="width: 32rpx; height: 28rpx"
            />
          </view>
          <view class="box_bottom_item_text f-s-28"> 我的钱包 </view>
        </view>
      </view>
    </view>
    <view class="section">
      <view class="sec_box">
        <up-grid :border="false" col="4">
          <up-grid-item v-for="(item, index) in toolLista" :key="index" @click="clickItem(item)">
            <image class="grid-icon" :src="item.icon"></image>
            <text class="grid-text">{{ item.title }}</text>
          </up-grid-item>
        </up-grid>
      </view>
      <view class="sec_box_1" v-if="toolList?.length && toolList?.length != 0">
        <view class="title"> 我的订单 </view>
        <up-grid :border="false" col="4">
          <up-grid-item v-for="(item, index) in toolList" :key="index" @click="clickItem(item)">
            <image class="grid-icon" :src="item.icon"></image>
            <text class="grid-text">{{ item.title }}</text>
          </up-grid-item>
        </up-grid>
      </view>
      <view class="sec_box_2 p-l-20 p-r-20" :style="{ height: cardHeight + 'px' }">
        <view class="item" @click="toSetting">
          <view class="title"
            ><up-icon name="setting" color="#202020" size="20" class="mar-r-10"></up-icon
            >系统设置</view
          >
          <view class="lv-pages-content-bodyer-card-rt">
            <!-- <view class="co-99 f-s-28">修改密码</view> -->
            <u-icon name="arrow-right" color="#333333" size="16"></u-icon>
          </view>
        </view>
        <view class="item" @click="toService">
          <view class="title"
            ><up-icon name="kefu-ermai" color="#202020" size="20" class="mar-r-10"></up-icon
            >联系客服</view
          >
          <view class="lv-pages-content-bodyer-card-rt">
            <view class="co-99 f-s-28">{{ info.sute_app_service }}</view>
            <u-icon name="arrow-right" color="#333333" size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <h-login ref="login"></h-login>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { onShow, onLoad, onReady } from '@dcloudio/uni-app'
import { navigateTo } from '@/utils'
import { doctorInfo } from '@/api/home'
import { copyRightApi } from '@/services/my/tool-about-us'
import { useMemberStore } from '@/stores'
import { getUserInfo } from './utils'
import { getBoundInfoApi, getDoctorBusTypeApi } from '@/api/patients/index'
const tops = ref(0)
const token = ref('')
const toolLista = ref<any>([
  {
    title: '个人资料',
    path: '/pages-users/my-page/edit-userinfo',
    auth: true,
    icon: 'https://ossresource.miyingbl.com/def/948ac202405231439284415.png',
    number: 0,
  },
  {
    title: '业务管理',
    path: '/pages-users/business-management/index',
    auth: true,
    icon: 'https://ossresource.miyingbl.com/def/b4d0d202405231405362923.png',
    number: 0,
  },
  {
    title: '创作中心',
    path: '/pages-users/create-centre/index',
    auth: true,
    icon: 'https://ossresource.miyingbl.com/def/7c5a2202405231436435552.png',
    number: 0,
  },
  {
    title: '实名认证',
    path: '/pages-users/my-page/physician',
    auth: true,
    icon: 'https://ossresource.miyingbl.com/def/7754a202405231438489695.png',
    number: 0,
  },
  {
    title: '问诊设置',
    path: '/pages-users/inquiry/index',
    auth: true,
    icon: 'https://ossresource.miyingbl.com/def/5b260202405231438364402.png',
    number: 0,
  },
  {
    title: '常用药品',
    path: '/pages-users/my-like/store',
    auth: true,
    icon: 'https://ossresource.miyingbl.com/def/f3264202405231405376012.png',
    number: 0,
  },
  // {
  //   title: '我的订单',
  //   path: '/pages-users/order/order',
  //   auth: true,
  //   icon: 'https://ossresource.miyingbl.com/def/eb634202405231405347830.png',
  //   number: 0,
  // },
])
const toolListb = ref<any>([
  {
    title: '孕产跟踪',
    path: '/pages-users/order/order?type=1',
    auth: true,
    icon: '/static/my/yunchan.png',
    number: 0,
    id: 1,
  },
  {
    title: '男性问诊',
    path: '/pages-users/order/order?type=2',
    auth: true,
    icon: '/static/my/nanxing.png',
    number: 0,
    id: 2,
  },
  {
    title: '儿科问诊',
    path: '/pages-users/order/order?type=3',
    auth: true,
    icon: '/static/my/erke.png',
    number: 0,
    id: 3,
  },
  {
    title: '慢病跟踪',
    path: '/pages-users/my-page/physician',
    auth: true,
    icon: '/static/my/manbing.png',
    number: 0,
    id: 4,
  },
])
const is_show = ref(false)
const is_show_s = ref(false)
const userInfo = ref<any>({})
const info = ref({})
const login = ref<any>(null)
const previewAvatar = () => {
  const token = useMemberStore().token
  if (token) {
    if (userInfo.value?.is_audit) {
      toPages(`/pages-users/my-page/index`)
    } else {
      return false
    }
  } else {
    toPages()
  }
}
const toSetting = () => {
  if (!token.value) {
    nextTick(() => {
      login.value.open()
    })
  } else {
    navigateTo('/pages-users/settings-page/index')
  }
}
const toService = () => {
  if (!token.value) {
    nextTick(() => {
      login.value.open()
    })
  } else {
    navigateTo('/pages-users/contact-service/index')
  }
}
//获取余额信息
const BoundInfo = ref({})
async function getBoundInfo() {
  const res = await getBoundInfoApi({ current_month_income: 2 })
  if (res?.code == 200) {
    BoundInfo.value = res?.data
  }
}
/**
 * 微信登录成功
 */
function updateInfo() {}
/**
 * 打开一键登录弹窗
 */
const toPages = (url?: any) => {
  const userStore = useMemberStore()
  const token = userStore.token
  if (!token && userStore?.islogin == 0) {
    nextTick(() => {
      login.value.open()
    })
  } else {
    uni.navigateTo({
      url: url,
    })
  }
}
async function copyRight() {
  try {
    const res: any = await copyRightApi()
    info.value = res.data
  } catch (error) {}
}
const clickItem = (item: any) => {
  const userStore = useMemberStore()
  const token = userStore.token
  if (!token) {
    return login.value.open()
  } else {
    if (item.title == '1') {
      if (userInfo.value?.is_audit) {
        navigateTo(item.path)
      } else {
        uni.showToast({
          title: '请先完成医师认证',
          icon: 'none',
        })
      }
    } else if (item.title == '常用药品') {
      uni.showToast({
        title: '功能暂未开通，敬请期待',
        icon: 'none',
      })
    } else {
      navigateTo(item.path)
    }
  }
}
const toggleEye = () => {
  is_show.value = !is_show.value
}
const toggleEyeS = () => {
  is_show_s.value = !is_show_s.value
}
// 获取用户信息
async function getDoctorInfo() {
  try {
    const token = useMemberStore().token
    if (token) {
      getUserInfo().then((res) => {
        userInfo.value = res.data
      })
    }
  } catch (error) {}
}
const navBottom = ref(0)
const cardHeight = ref(0)
const scrollHeight = ref(0)
function getDocumentInfo() {
  const query = uni.createSelectorQuery()
  query
    ?.select('.sec_box_1')
    ?.boundingClientRect((data) => {
      navBottom.value = data?.bottom
      cardHeight.value = scrollHeight.value - data?.bottom
      console.log('cardHeight', cardHeight.value)
    })
    .exec()
}
onShow(() => {
  toolList.value = []
  const store = useMemberStore()
  token.value = store?.token
  if (!token.value) {
    nextTick(() => {
      login.value.open()
    })
  } else {
    getDoctorInfo()
    getBoundInfo()
    getDoctorBusType()
  }
})
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      console.log('e', e)

      tops.value = e.statusBarHeight
      scrollHeight.value = e.screenHeight
      getDocumentInfo()
    },
  })
})
onLoad(() => {
  copyRight()
})
//获取开通的业务
const toolList = ref([])
const businessIndex = ref(0)
async function getDoctorBusType() {
  const res = await getDoctorBusTypeApi()
  if (res?.code == 200) {
    businessIndex.value = res?.data?.length
    if (res?.data?.length == 3) {
      toolList.value = toolListb.value.slice(0, 3)
    } else {
      let data = res.data
      let arr = toolListb.value.filter((item) =>
        data.some((filter) => filter.transaction_type_id == item.id),
      )
      toolList.value = arr
    }
  }
}
</script>
<style>
page {
  background-color: #f5f6f8;
}
</style>
<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-image: url('@/static/my/my_bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #f5f6f8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .box_1 {
    width: 100vw;
    padding-top: 100rpx;
    padding-left: 24rpx;
    box-sizing: border-box;
    .box_header {
      margin-bottom: 30rpx;
      .box_r {
        width: 152rpx;
        height: 48rpx;
        background: #049c96;
        border-radius: 100rpx 0rpx 0rpx 100rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #ffffff;
      }
    }
    .box_bottom {
      padding: 0 24rpx;
      .box_bottom_item_text {
        image {
          width: 26rpx;
          height: 22rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
  .section {
    flex: 1;
    width: 100vw;
    box-sizing: border-box;
    padding: 24rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    .sec_box {
      width: 702rpx;
      height: 302rpx;
      background: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding-top: 40rpx;
      .grid-icon {
        width: 44rpx;
        height: 44rpx;
      }
      .grid-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #202020;
        padding: 10rpx 0 50rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
      }
    }
    .sec_box_1 {
      width: 702rpx;
      height: 212rpx;
      background: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding-top: 20rpx;
      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #202020;
        padding-left: 20rpx;
        margin-bottom: 30rpx;
      }
      .grid-icon {
        width: 44rpx;
        height: 44rpx;
      }
      .grid-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #202020;
        padding: 10rpx 0 50rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
      }
    }
    .sec_box_2 {
      width: 702rpx;
      flex: 1;
      background: #ffffff;
      border-radius: 20rpx;

      .item {
        width: 100%;
        height: 120rpx;
        border-bottom: 1rpx solid #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 32rpx;
          font-weight: 500;
          color: #000000;
          display: flex;
        }
        .lv-pages-content-bodyer-card-rt {
          display: flex;
          justify-content: flex-end;
          .head-bg {
            width: 90rpx;
            height: 60rpx;
            background-color: #f6f6f6;
          }
          .lv-pages-content-bodyer-card-picker-pl {
            color: #868686;
            font-size: 24rpx;
          }
          ::v-deep .placeholder-class {
            font-size: 24rpx;
          }
          .text-input {
            text-align: right;
          }
          ::v-deep .u-icon {
            margin-left: 16rpx;
          }
        }
      }
    }
  }
}
.user_tag {
  width: 112rpx;
  height: 27rpx;
  background: url('https://ossresource.miyingbl.com/def/1359e202405250951295117.png') center center;
  background-size: 100% 27rpx;
  line-height: 27rpx;
  font-weight: 500;
  font-size: 18rpx;
  color: #20c9c2;
  padding-left: 25rpx;
  margin-left: 10rpx;
}
.user_tag_2 {
  width: 82rpx;
  height: 27rpx;
  background: url('https://ossresource.miyingbl.com/def/7ec37202406201856419345.png') center center;
  background-size: 100% 27rpx;
  line-height: 27rpx;
  font-weight: 500;
  font-size: 18rpx;
  color: #20c9c2;
  padding-top: 2rpx;
  padding-left: 27rpx;
  margin-left: 10rpx;
}
.user_tag_3 {
  width: 94rpx;
  height: 27rpx;
  background: url('https://ossresource.miyingbl.com/def/ee2fb202406201857456126.png') center center;
  background-size: 100% 27rpx;
  line-height: 27rpx;
  font-weight: 500;
  font-size: 18rpx;
  color: #20c9c2;
  padding-top: 2rpx;
  padding-left: 25rpx;
  margin-left: 10rpx;
}
.user_tag_5 {
  width: 130rpx;
  height: 27rpx;
  background: url('https://ossresource.miyingbl.com/def/bfa5f202406201858124664.png') center center;
  background-size: 100% 27rpx;
  line-height: 27rpx;
  font-weight: 500;
  font-size: 18rpx;
  color: #20c9c2;
  padding-top: 2rpx;
  padding-left: 27rpx;
  margin-left: 10rpx;
}
</style>
